<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">
      <el-form-item label="报销人：" prop="userName">
        <el-select v-model="form.userName" placeholder="请选择报销人" clearable>
          <el-option v-for="item in userData" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报销时间：" prop="reimburseTime">
        <el-date-picker v-model="form.reimburseTime" type="datetime" placeholder="请选择报销时间" />
      </el-form-item>
      <el-form-item label="报销类型：" prop="reimburseType">
        <el-select v-model="form.reimburseType" placeholder="请选择报销类型" clearable>
          <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报销费用：" prop="reimburseFee">
        <el-input v-model="form.reimburseFee" placeholder="请输入报销费用"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="发票：" prop="invoice">
        <el-upload class="upload-demo" accept=".pdf" :limit="1" drag action="/api/reimburse/upload-invoice"
          :headers=headers :on-success=handleUpload :on-preview=handlePreview>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖动到这里或者 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts">
import store from "@/store";
import type { LayerType } from '@/components/layer/index.vue'
import type { Ref } from 'vue'
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import { defineComponent, ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { add, update } from '@/api/reimburseManage/reimburse'
import { typeData, userData } from './enum'
import Layer from '@/components/layer/index.vue'
export default defineComponent({
  components: {
    Layer,
    UploadFilled
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true
        }
      }
    }
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext | null> = ref(null)
    const layerDom: Ref<LayerType | null> = ref(null)
    let form = ref({
      userName: '',
      reimburseTime: '',
      reimburseType: '',
      reimburseFee: '',
      remark: '',
      invoice: '',
    })

    const headers = ref({
      "Authorization": "Bearer " + store.state.user.token,
      "X-Authorization": "Bearer " + store.state.user.refreshToken
    })

    const rules = {
      roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
    }

    const handleUpload = (response: any) => {
      form.value.invoice = response.data
    }
    const handlePreview = (uploadFile: any) => {
      
    }

    init()
    function init() { // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
        if (form.value.reimburseTime) form.value.reimburseTime = new Date(form.value.reimburseTime)
      } else {

      }
    }
    return {
      form,
      rules,
      layerDom,
      ruleForm,
      typeData,
      userData,
      headers,
      UploadFilled,
      handleUpload,
      handlePreview
    }
  },
  methods: {
    submit() {
      if (this.ruleForm) {
        this.ruleForm.validate((valid) => {
          if (valid) {
            let params = this.form
            if (this.layer.row) {
              this.updateForm(params)
            } else {
              this.addForm(params)
            }
          } else {
            return false;
          }
        });
      }
    },
    // 新增提交事件
    addForm(params: object) {
      add(params)
        .then(res => {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.$emit('getTableData', true)
          this.layerDom && this.layerDom.close()
        })
    },
    // 编辑提交事件
    updateForm(params: object) {
      update(params)
        .then(res => {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          this.$emit('getTableData', false)
          this.layerDom && this.layerDom.close()
        })
    }
  }
})
</script>

<style lang="scss" scoped></style>